<template>
    <div class="admin-login">
      <div class="login-container">
        <div class="login-box">
          <div class="login-title">
            <h2>后台管理系统</h2>
            <p>{{ isLogin ? '欢迎回来' : '创建新账号' }}</p>
          </div>
          
          <div class="form-container">
            <el-form :model="formData" :rules="rules" ref="formRef">
              <el-form-item prop="email">
                <el-input 
                  v-model="formData.email" 
                  placeholder="请输入邮箱"
                  prefix-icon="el-icon-message"
                />
              </el-form-item>
              
              <el-form-item prop="code" class="code-item">
                <el-input 
                  v-model="formData.code" 
                  placeholder="请输入验证码"
                  prefix-icon="el-icon-lock"
                />
                <el-button 
                  type="primary" 
                  :disabled="countdown > 0"
                  @click="handleGetCode"
                >
                  {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                </el-button>
              </el-form-item>
              
              <el-button 
                type="primary" 
                class="submit-btn" 
                :loading="loading"
                @click="handleSubmit"
              >
                {{ isLogin ? '登录' : '注册' }}
              </el-button>
            </el-form>
            
            <div class="switch-mode" @click="toggleMode">
              {{ isLogin ? '没有账号？去注册' : '已有账号？去登录' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { login, getVerifyCode, registerUser } from '@/api/admin'
  
  const router = useRouter()
  const formRef = ref(null)
  const loading = ref(false)
  const isLogin = ref(true)
  const countdown = ref(0)
  let timer = null
  
  const formData = reactive({
    email: '',
    code: ''
  })
  
  const rules = {
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '请输入验证码', trigger: 'blur' },
      { len: 6, message: '验证码长度为6位', trigger: 'blur' }
    ]
  }
  
  const handleGetCode = async () => {
    try {
      await formRef.value.validateField('email')
      await getVerifyCode(formData.email)
      ElMessage.success('验证码已发送')
      countdown.value = 60
      timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    } catch (error) {
      ElMessage.error(error.message || '获取验证码失败')
    }
  }
  
  const handleSubmit = async () => {
    if (!formRef.value) return
    
    try {
      await formRef.value.validate()
      loading.value = true
      
      if (isLogin.value) {
        await login(formData)
        ElMessage.success('登录成功')
        router.push('/admin/dashboard')
      } else {
        await registerUser(formData)
        ElMessage.success('注册成功')
        isLogin.value = true
      }
    } catch (error) {
      ElMessage.error(error.message || (isLogin.value ? '登录失败' : '注册失败'))
    } finally {
      loading.value = false
    }
  }
  
  const toggleMode = () => {
    isLogin.value = !isLogin.value
    formRef.value?.resetFields()
  }
  </script>
  
  <style scoped lang="scss">
  .admin-login {
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .login-container {
      width: 400px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      animation: slideUp 0.6s ease-out;
      
      .login-title {
        text-align: center;
        margin-bottom: 30px;
        
        h2 {
          font-size: 24px;
          color: #333;
          margin-bottom: 8px;
        }
        
        p {
          color: #666;
          font-size: 14px;
        }
      }
      
      .form-container {
        .code-item {
          display: flex;
          gap: 10px;
          
          .el-input {
            flex: 1;
          }
        }
        
        .submit-btn {
          width: 100%;
          margin-top: 20px;
          height: 40px;
        }
        
        .switch-mode {
          text-align: center;
          margin-top: 16px;
          color: #666;
          cursor: pointer;
          transition: color 0.3s;
          
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  </style>